<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        select{
            width: 110px;
            height: 100px;
        }
        div{
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" >
        //页面加载完成后
        //第一个按钮，往右边添加选项
        $(function () {
            var $but1 = $("button:eq(0)");
            $but1.click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            })
        })
        //第二个按钮，全部添加至右边
        $(function () {
            var $but1 = $("button:eq(1)");
            $but1.click(function () {
                $("select:eq(0) option").appendTo($("select:eq(1)"));
            })
        })
        //第三个按钮，往左边添加选项
        $(function () {
            var $but1 = $("button:eq(2)");
            $but1.click(function () {
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
            })
        })
        //第四个按钮，全部添加到左边
        $(function () {
            var $but1 = $("button:eq(3)");
            $but1.click(function () {
                $("select:eq(1) option").appendTo($("select:eq(0)"));
            })
        })
    </script>
</head>
<body>
    <div id="left">
        <select multiple="multiple" >
            <option value="opt01">选项一</option>
            <option>选项二</option>
            <option>选项三</option>
            <option>选项四</option>
            <option>选项五</option>
            <option>选项六</option>
            <option>选项七</option>
        </select>

        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    <div id="right">
        <select multiple="multiple">

        </select>
        <button>选中添加到左边</button>
        <button>全部添加到左边</button>
    </div>


</body>
</html>